import React from 'react';
import { Tree, Card, Input } from 'antd';
import {
    CodepenOutlined,
    ShareAltOutlined,
    SettingOutlined,
    FileOutlined,
} from '@ant-design/icons';
import { connect } from 'umi';

const apiURL = "/api/services/app/PartBOM/";
const { Search } = Input;
class BomTree extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            treeData: [],
            expandedKeys: [],
            searchValue: '',
            autoExpandParent: true,
        }
    }
    componentDidMount() {
        this.props.onRef(this)
        this.fetchData(this.props.BomData)
    }
    resetBomTree = () => {
        this.setState({ treeData: [] });
    }
    fetchData = (BomData: any) => {
        if (BomData && BomData.node) {
            var treeData = []
            var node = {
                title: BomData.node.partNum + BomData.node.partDescription,
                key: BomData.node.id,
                item: BomData.node,
                icon: <CodepenOutlined />,
                type: 'root',
                children: BomData.childs ? this.mapData(BomData.childs, BomData.boos) : null
            }
            treeData.push(node)

            this.setState({ treeData })
        }
    }
    mapData = (parentNode: any, boos: any) => {
        var treeData: any = []
        boos.map((item: any) => {
            var node = {
                title: item.node.oprSeq + "-" + item.node.opDesc,
                key: item.node.id,
                item: item.node,
                icon: item.node.subContract ? <ShareAltOutlined /> : <SettingOutlined />,
                type: 'boo',
                children: item.mtls ? this.mapMtlData(item.mtls) : null
            }
            treeData.push(node)
        });
        parentNode.map((item: any) => {
            var node = {
                title: item.node.partNum + item.node.partDescription,
                key: item.node.id,
                item: item.node,
                icon: <CodepenOutlined />,
                type: 'asm',
                children: item.childs ? this.mapData(item.childs, item.boos) : null
            }
            treeData.push(node)
        });

        return treeData;
    }
    mapMtlData = (mtls: any) => {
        var treeData: any = []
        mtls.map((item: any) => {
            var node = {
                title: item.partNum + item.partDescription,
                key: item.id,
                item,
                icon: <FileOutlined />,
                type: 'mtl',
            }
            treeData.push(node)
        });
        return treeData;
    }
    render() {
        const { treeData, autoExpandParent, expandedKeys, searchValue } = this.state;
        const onExpand = (expandedKeys: any) => {
            this.setState({
                expandedKeys,
                autoExpandParent: false,
            });
        };

        const onCheck = (checkedKeys: any) => {
            //console.log('onCheck', checkedKeys);
        };
        const getParentKey = (value: any, tree: any, expandedKeys: any = []) => {
            tree.map((item: any) => {
                if (item.title.indexOf(value) > -1) {
                    expandedKeys.push(item.key);
                }
                if (item.children) {
                    getParentKey(value, item.children, expandedKeys);
                }
            })
        };
        const onSearch = (e: any) => {
            const { value } = e.target;
            if (!value || value === '') {
                return;
            }
            const { treeData } = this.state
            const expandedKeys: any = []

            treeData[0]?.children.map((item: any) => {
                if (item.title.indexOf(value) > -1) {
                    expandedKeys.push(item.key);
                }
                if (item.children) {
                    getParentKey(value, item.children, expandedKeys);
                }
            })
            this.setState({
                expandedKeys,
                searchValue: value,
                autoExpandParent: true,
            });
        };

        const onSelect = (selectedKeys: any, info: any) => {
            this.props.setCurrentAsmb(info.node.item, info.node.type)
        };

        const loop = (data: any) =>
            data.map((item: any) => {
                const index = item.title.indexOf(searchValue);
                const beforeStr = item.title.substr(0, index);
                const afterStr = item.title.substr(index + searchValue.length);
                const title =
                    index > -1 ? (
                        <span>
                            {beforeStr}
                            <span style={{ color: '#f50' }}>{searchValue}</span>
                            {afterStr}
                        </span>
                    ) : (
                        <span>{item.title}</span>
                    );
                if (item.children) {
                    return {
                        title,
                        key: item.key,
                        item: item.item,
                        icon: item.icon,
                        type: item.type,
                        children: loop(item.children)
                    };
                }

                return {
                    title,
                    key: item.key,
                    item: item.item,
                    icon: item.icon,
                    type: item.type,
                    children: item.children
                };
            });
        return (
            <Card title="制造工艺">
                <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={onSearch} />
                <Tree
                    showIcon
                    checkable
                    defaultExpandAll
                    onExpand={onExpand}
                    onCheck={onCheck}
                    onSelect={onSelect}
                    treeData={loop(treeData)}
                    autoExpandParent={autoExpandParent}
                    expandedKeys={expandedKeys}
                />
            </Card>
        );
    }
}

export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(BomTree);